 <template>
  <div>
    <v-flex>
      <v-toolbar color="white" light dense flat>
        <v-spacer></v-spacer>
        <v-dialog v-model="dialog" max-width="500">
          <template v-slot:activator="{ on }">
            <v-btn color="primary" round small dark class="mb-2" v-on="on">新增</v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="headline">{{ formTitle }}</span>
            </v-card-title>
            <v-card-text>
              <v-container fluid>
                <v-layout row justify-space-between>
                  <v-flex xs4 order-md3 order-xs2>
                    <v-text-field
                      v-model="editedItem.hh"
                      
                      @change="search"
                      label="货号"
                      required
                    ></v-text-field>
                  </v-flex>
                  <v-flex xs4 order-md3 order-xs2>
                    <v-text-field v-model="editedItem.sl" label="数量" required></v-text-field>
                  </v-flex>
                </v-layout>

                <v-card color=" darken-3" flat style="border:1px solid;border-radius:5px;">
                  <v-layout row justify-center>
                    <v-flex xs12 sm6 md12 offset-xs1>
                      <v-text-field v-model="editedItem.pinm" label="品名" disabled></v-text-field>
                    </v-flex>
                    <v-flex xs1 sm md1 offset-xs1></v-flex>
                  </v-layout>
                  <v-layout row justify-center>
                    <v-flex xs12 sm6 md4 offset-xs1>
                      <v-text-field v-model="editedItem.zhongl" label="重量 (kg)" disabled></v-text-field>
                    </v-flex>
                    <v-flex xs12 sm6 md4 offset-xs1>
                      <v-text-field v-model="editedItem.chang" label="长 (cm)" disabled></v-text-field>
                    </v-flex>
                    <v-flex xs12 sm6 md4 offset-xs1>
                      <v-text-field v-model="editedItem.kuan" label="宽 (cm)" disabled></v-text-field>
                    </v-flex>
                    <v-flex xs12 sm6 md4 offset-xs1>
                      <v-text-field v-model="editedItem.gao" label="高 (cm)" disabled></v-text-field>
                    </v-flex>
                    <v-flex xs1 sm md1 offset-xs1></v-flex>
                  </v-layout>
                </v-card>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" flat @click="close">取消</v-btn>
              <v-btn color="blue darken-1" flat @click="save">保存</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-toolbar>
      <v-data-table :headers="headers" :items="datasource" class="elevation-1">
        <template v-slot:items="props">
          <td class="text-xs-right">{{ props.item.hh }}</td>
          <td class="text-xs-right">{{ props.item.pinm }}</td>
          <td class="text-xs-right">{{ props.item.xingh }}</td>
          <td class="text-xs-right">{{ props.item.tm }}</td>
          <td class="text-xs-right">{{ props.item.sl }}</td>

          <td class="justify-center layout px-0">
            <v-icon small class="mr-2" @click="editItem(props.item)">edit</v-icon>
            <v-icon small @click="deleteItem(props.item)">delete</v-icon>
          </td>
        </template>
      </v-data-table>
    </v-flex>
  </div>
</template>



<script>
export default {
  name: "form-table",
  props: {
    datasource: {
      type: Array,
      default: []
    }
  },
  data: () => ({
    dialog: false,
    headers: [
      { text: "货号", align: "left", sortable: false, value: "hh" },
      { text: "品名", align: "left", sortable: false, value: "pinm" },
      { text: "型号", align: "left", value: "xingh", sortable: false },
      { text: "条码", align: "left", value: "tm", sortable: false },
      { text: "数量", align: "left", value: "sl" },
      { text: "操作", align: "left", value: "hh", sortable: false }
    ],
    editedIndex: -1,
    editedItem: {
      hh: "",
      pinm: "",
      xingh: 0,
      tm: "",
      zhongl: 0,
      chang: 0,
      kuan: 0,
      gao: 0,
      sl: 0
    },
    defaultItem: {
      hh: "",
      pinm: "",
      xingh: 0,
      tm: "",
      zhongl: 0,
      chang: 0,
      kuan: 0,
      gao: 0,
      sl: 0
    }
  }),

  computed: {
    formTitle() {
      return this.editedIndex === -1 ? "新增" : "编辑";
    },
  
  },

  watch: {
    dialog(val) {
      val || this.close();
    }
  },

  created() {
    this.initialize();
  },

  methods: {
    search(hh) {
      // this.editedItem.hh = Number(hh);
      hh = Number(hh);
      this.$http({
        method: "get",
        url: "item/item/queryhh?hh=" + hh,
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        }
      })
        .then(resp => {
          // 关闭窗口
          this.editedItem = resp.data;
        })
        .catch(() => {
          this.editedItem = {};
        });
    },
    initialize() {
      this.datasource = [];
    },

    editItem(item) {
      this.editedIndex = this.datasource.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
    },

    deleteItem(item) {
      const index = this.datasource.indexOf(item);
      confirm("是否删除此项?") &&
        this.datasource.splice(index, 1);
    },

    close() {
      this.dialog = false;
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      }, 300);
    },

    save() {
      if (!this.editedItem.pinm) {
        return;
      }
      if (!this.editedItem.sl || this.editedItem.sl <= 0) {
        return;
      }
      if (this.editedIndex > -1) {
        Object.assign(this.datasource[this.editedIndex], this.editedItem);
      } else {
        this.datasource.push(this.editedItem);
      }
      this.close();
    }
  }
};
</script>
